<template>
	<view class="body-view">
		<!-- 顶部栏 -->
		<view class="top-view">
			<image class="user-image" src="../../static/image/head.jpg"></image>
			<view class="user-name">Lange小蓝子</view>
		</view>

		<!-- 信息栏 -->
		<view class="main-view">
			<view class="my-order">
				<view class="title">我的订单</view>
				<view class="order-cate">
					<view class="order-item">
						<image class="order-item-icon" src="../../static/tab_icons/daifukuan.png"></image>
						<view class="item-name">待付款</view>
					</view>
					<view class="order-item">
						<image class="order-item-icon" src="../../static/tab_icons/daifukuan.png"></image>
						<view class="item-name">待发货</view>
					</view>
					<view class="order-item">
						<image class="order-item-icon" src="../../static/tab_icons/daishouhuo.png"></image>
						<view class="item-name">待收货</view>
					</view>
					<view class="order-item">
						<image class="order-item-icon" src="../../static/tab_icons/daipingjia.png"></image>
						<view class="item-name">待评价</view>
					</view>
					<view class="order-item">
						<image class="order-item-icon" src="../../static/tab_icons/tuikuan.png"></image>
						<view class="item-name">退款/售后</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main-view2">
			<view class="my-wallet">
				<image class="wallet-icon" src="../../static/tab_icons/gerenxinxi.png"></image>
				个人信息
				<view class="jiantou">></view>
			</view>
			<view class="my-wallet">
				<image class="wallet-icon" src="../../static/tab_icons/qianbao.png"></image>
				我的钱包
				<view class="jiantou">></view>
			</view>
			<view class="my-wallet">
				<image class="wallet-icon" src="../../static/tab_icons/kefu.png"></image>
				在线客服
				<view class="jiantou">></view>
			</view>
			<view class="my-wallet">
				<image class="wallet-icon" src="../../static/tab_icons/shezhi.png"></image>
				设置
				<view class="jiantou">></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		}
	}
</script>

<style lang="scss">
	.body-view {
		background-color: #efefef;
	}

	.top-view {
		height: 80px;
		background-color: #C00000;
		display: flex;
		justify-content: left;
		align-items: center;
		position: sticky;
		top: 0%;
		z-index: 999;

		.user-image {
			height: 60px;
			width: 60px;
			margin-left: 20px;
			border-radius: 50%;
		}

		.user-name {
			font-size: 26px;
			margin-left: 10px;
		}
	}

	.main-view {
		height: 100px;
		width: 680rpx;
		margin: auto;
		margin-top: 20px;
		border-radius: 10px;
		background-color: white;

		.my-order {
			border-radius: 10px;
			height: 100px;
			width: 100%;
			border-bottom: 1px solid #ababab;

			.title {
				padding-top: 5px;
				margin-left: 10px;
			}

			.order-cate {
				margin-top: 5px;
				display: flex;
				justify-content: center;
				align-items: center;

				.order-item {
					width: 20%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.order-item-icon {
						width: 30px;
						height: 30px;
					}

					.item-name {
						font-size: 12px;
					}
				}
			}
		}

	}

	.main-view2 {
		height: 500px;
		width: 680rpx;
		margin: auto;
		margin-top: 20px;
		border-radius: 10px;
		background-color: white;
		position: relative;

		.my-wallet {
			color: #666666;
			padding-left: 10px;
			font-size: 20px;
			height: 40px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ababab;
			
			.wallet-icon{
				height: 28px;
				width: 28px;
				margin-right: 10px;
			}
			
			.jiantou{
				position: absolute;
				right: 10px;
				color: #666666;
			}
		}
	}
</style>
